<template>
  <div id="USER">
    <van-row type="flex" id="banner" justify="space-around">
      <van-col span="9" style="padding: 20px">
        <van-image
          class="touxiang"
          fit="cover"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
          alt="用户头像"
          width="100px"
          height="100px"
        />
      </van-col>
      <van-col span="15" class="text">
        <p for="userId">{{usename}}</p>
        <span for="num"> 账号:{{ userId }}</span>
      </van-col>
    </van-row>

    <van-cell-group class="zjz">
      <van-cell
        style="padding: 10px 0; text-indent: 1.5rem"
        title="个人证件照"
        is-link
        to="/zjzhd"
      />
      <van-cell
      v-if=" weight >= 4"
        style="padding: 10px 0; text-indent: 1.5rem"
        title="我是监管"
        is-link
        to="jianguan"
      />
    </van-cell-group>

    <van-pull-refresh v-model="loading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <van-cell v-for="(v, i) in list" :key="i">
          <Dongtai :dynamicRecord="v"></Dongtai>
          <span class="time">
            {{ v.dataTime }}
          </span>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import Dongtai from "./dongtai.vue";

export default {
  components: {
    Dongtai,
  },
  mounted() {
    this.userId=this.$store.state.userId
    this.weight=this.$store.state.weight
    this.$axios
      .get(`${this.$api}getdynamic/${this.userId}`)
      .then((res) => {
        this.list = res.data[0].dynamicRecord;
        console.log(this.list);
      });

  },
  data() {
    return {
      list: [],
      loading: false,
      finished: false,
      refreshing: false,
      userId: this.$store.state.userId,
      usename:this.$store.state.usename,
      weight:0
    };
  },
  methods: {
    onLoad() {
      //上拉刷新
      this.$axios
        .get(`${this.$api}getdynamic/${this.userId}`)
        .then((res) => {
          this.list = res.data[0].dynamicRecord;
        });
          this.isLoading = false; //下拉刷新请求完成
          this.loading = false; //上拉加载更多请求完成
    },
    onRefresh() {
      //下拉刷新
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
  },
};
</script>

<style>
#USER {
  background-color: #eee;
  min-height: 100vh;
}
#banner {
  background-color: #fff;
}
.text {
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: flex-start;
}
.text p {
  color: #000;
  font-size: 1.5rem;
}
.text span {
  color: #666;
}
.touxiang {
  border-radius: 20%;
  overflow: hidden;
}
.zjz {
  margin: 10px 0;
}
#nav {
  white-space: nowrap;
  overflow-x: scroll;
}

#nav li {
  width: 40vw;
  height: 150px;
  display: inline-block;
}
.dongtai {
  text-align: left;
  background-color: #fff;
}
.van-cell {
  margin: 5px 0;
}
.van-image {
  border-radius: 5px;
  overflow: hidden;
}
.van-cell__value--alone{
  text-align: right !important;
}
</style>